<script setup lang="ts">
const appInstance = getCurrentInstance()
const components = appInstance?.appContext.components
const ElementKeys: string[] = Object.keys(components as object).filter(item => item.startsWith("El")).slice(3)
const moduleList = ElementKeys.map((item, index) => {
    return {
        name: item,
        index: index,
        path: resolveComponent(item)
    }
})
function ComponentDragStart(e: DragEvent) {
    console.log("start", e)
}
function ComponentDragEnd(e: DragEvent) {
    console.log("end", e)
}
</script>
<template>
    <div class="module-properties-wrapper">
        <ul class="module-scroll-wrapper">
            <li v-for="(item, index) in moduleList" class="module-item" :data-name="item.name" :key="index"
                @dragstart="ComponentDragStart" @dragend="ComponentDragEnd" draggable="true">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>
<style lang="scss" scoped>
.module-properties-wrapper {
    text-align: left;
    max-height: 80vh;
    overflow: hidden;

    .module-scroll-wrapper {
        width: 100%;
        height: 80vh;
        overflow-x: hidden;
        overflow-y: auto;

        .module-item {
            transition: all .3s linear;
            color: #333;
            cursor: pointer;
            padding: 5px 0 5px 5px;
            border-radius: 5px;
            user-select: none;

            &:hover {
                background-color: #efefef;
            }
        }
    }
}
</style>